<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>jQuery</title>
    <script src="/libs/jquery.js"></script>
    <script src="/libs/myspecial.js"></script>

    <style>
        .fade{
            background: purple;
            width: 200px;
            height: 120px;
        }
    </style>
</head>

<body>
    <input type="text" name="text" id="text">
    <button id="evt">click me!</button>

    <div style="display:table;" class="first">
        <tr>
            <td>d</td>
            <td>book</td>
        </tr>
        <tr>
            <td>###</td>
            <td>111</td>
        </tr>
    </div>

    <div id="host" class="event" width="100px" color="red"> host div  <div> sdflj asdlfkj</div> <div>sdfas  </div> <ul> <li>21q3e13</li></ul></div>

    <div class="fade"></div>
    <script>
        // jquery init
        // const btn = $('#evt')
        // const btn2 = $('<button>btn 2</button>')
        // console.log(btn)

        const $a = $('body')

        $a.on('dblclick', function(){
            console.log('dblclick')
        })
        $('div').on('dblclick', function(){
            console.log('dblclick 2')
        })

        $('.event').on('click', function(e){
            $(this).css({
                background: 'blue'
            })
        })

        $('.event').on('clickoutside', function(e){
            $(this).css({
                background: 'red'
            })
        })

        $('.event').on('clickoutside', handler)
        $('body').on('clickoutside', handler)
        function handler(){
            console.log('first clickoutside', this)
        }
        $('.event').off('clickoutside', handler)
        // event();


        // jquery event
        function event() {
            // $a.one('click', 'button' ,()=>{
            //     console.log( 'boo.foo is triggered!' )
            // })
            // $('button').trigger('click' )

            const txt = window.$i = $('input')
            txt.on('click', function(){
                console.log('click aaa')
            })
           
            // txt.on('clickoutside', (...args)=>{
            //     console.log('clickoutside')
            // })
            // $('body').on('clickoutside', ()=>{
            //     console.log('body clickoutside')
            // })
            //  txt.trigger('clickoutside')
            // txt.off('myfocusin')
            // const $td = $('button');
            // $td.on('click', function(){
            //     console.log( 'button click !')
            // })

            // txt.on('focus', e => {
            //     console.log(e.target)
            // })

            // txt.on('focus', function(...args){
            //     console.log(this);
            //     console.log(args)
            // })

            // $a.on('load', 'img', function () {
            //     console.log('img loaded!!!')
            // })

            // const img = new Image()
            // document.body.appendChild(img)
            // img.src = 'imgs/img.png'

            // $('img').on('load', function () {
            //     console.log('image self on load!!!')
            // })

            // $a.on('load', 'img', function () {
            //     console.log('img loaded!!!')
            // })
        }



        // deferred
        // deferred();
        function deferred() {
            const dtd = $.Deferred(function (promise) {
                console.log('1')
                setTimeout(function() {
                    promise.resolve('good')
                }, 1000)

            })
            dtd.resolve('bad').then(function(d) {
                console.log(2)
                console.log(d)
            })

            const p = $.Deferred().promise(function(){
                console.log('test 1');
                this.resolve('test promise resolve')
            }).then(function(m){
                console.log(m)
            })

        }



        function shadow() {
            // shadowRoot
            const elem = document.querySelector('#host');
            const shadowRoot = elem.attachShadow({ mode: 'open' });
            const p = document.createElement('p');
            shadowRoot.appendChild(p);
            p.textContent = 'Hello shadow elem!';
        }



        // css
        function css() {

            $a.width('1000px')
            const $h = $('<h1></h1>').text('book red color').css({ 'width': '1000px', 'max-width': '500px' })
            console.log($h.css('width'))
            $('body').append($h)
            console.log($h.css('width'))
        }

        function ajax() {
            $.ajax({
                url: '/api/test',
                type: 'get',
                data: {
                    name: 'foo'
                },
                success: function (data) {
                    console.log(data);
                }
            });
        }


        // animation();
        function animation(){
            $('.fade').fadeOut()
        }


    </script>
</body>

</html>